<!-- 护理项目列表页 -->
<template>
    <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
    <div class="min-h serveProject bg-wt">
      <SearchForm
      :searchData="pagination"
      @handleClear="handleClear"
      @handleReset="handleReset"
      @handleSearch="getList"
      ></SearchForm>  
      
      <TableList
          :data="data"
          :bordered="bordered"
          :hover="hover"
          :size="size"
          :total="total"
          :pagination="pagination"
          @onPageChange="onPageChange"

          @handleBulid="handleBulid"

          @handleEdit="handleEdit"
          ></TableList>

         <DialogForm
         ref="formRef"
         :visible="visible"
         :title="title"
         :data="formDataRef"
         @handleClose="handleClose"
         @handleAdd="handleAdd"
         @handleEdit="handleEditForm"
         ></DialogForm>

    </div>
</template>

<script setup lang="jsx">
import { ref ,onMounted} from 'vue';
import { getProjectDetails, getProjectList, projectAdd, projectUpdate } from "@/api/serve";
//导入分页列表查询子组件
import TableList from './components/TableList.vue';
import SearchForm from './components/SearchForm.vue';
//导入新增或修改对话框
import DialogForm from '@/pages/serve/plan/project/components/DialogForm.vue';
import { MessagePlugin } from 'tdesign-vue-next';
const data = ref([]);
const total = ref(0);

const bordered = ref(true);
const hover = ref(false);
const size = ref('medium');
const showHeader = ref(true);


const pagination = ref({
  pageNum: 1,
  pageSize: 5
});
//当页码或每页大小改变的时候触发的函数事件
const onPageChange=(pageInfo)=>{
console.log(pageInfo)
//当页码或每页大小改变更新pagination中的数据
pagination.value.pageNum=pageInfo.current
pagination.value.pageSize=pageInfo.pageSize
//重新查询
getList()
}

//远程调用分页查询护理项目列表
const getList= async()=>{
  const result=await getProjectList(pagination.value)
  //判断是否成功
  if (result.code == 200) {
    //成功，更新列表data，总条数total
    data.value=result.data.records
    total.value=result.data.total
  }
}
//钩子函数
onMounted(()=>{
  getList()
})

//'handleClear','handleReset','handleSearch'
const handleClear=(val)=>{
  if(val=='name'){
  //清除name数据
    pagination.value.name=''
  }else if(val='status') {
    //清除status数据
    delete pagination.value.status
  }
//重新查询数据
getList()
}

//handleReset点击事件，重置表单所有数据
const handleReset=()=>{
  pagination.value={
    pageNum:1,
    pageSize:5
  }
  //重新查询数据
  getList()
}
//新增对话框操作逻辑
const visible=ref(false)
const title=ref('')
const formRef=ref({})

//新增按钮事件
const handleBulid=()=>{
  title.value='新增'
  visible.value=true
}
//新增或修改对话框
const handleClose=()=>{
  visible.value=false
}
//新增护理项目点击事件
const handleAdd=async (formData)=>{
  const result=await projectAdd(formData)
  //判断返回code是否为200
  if(result.code==200){
    MessagePlugin.success('操作成功')
    visible.value=false
    formRef.value.handleClear()
    getList()
  }else{
    MessagePlugin.error(result.msg)
  }
}

//编辑护理项目对话框逻辑处理
const formDataRef=ref([])
const handleEdit=async (id)=>{
  const result=await getProjectDetails(id)
  if(result.code==200){
    formDataRef.value=result.data
    title.value='编辑'
    visible.value=true
  }else{
    MessagePlugin.error(result.msg)
  }
}

//修改保存点击事件
const handleEditForm=async (formData)=>{
  //远程调用修改护理项目接口
const result=await projectUpdate(formData)
//判断返回的code是否为200
if(result.code==200){
  //成功
  //提示成功
  MessagePlugin.success('修改成功')
  //关闭对话框
  visible.value=false
  //清空表单数据
  formRef.value.handleClear()
  //重新查询
  getList()
}else{
  //失败返回失败信息
  MessagePlugin.error(result.msg)
}
}
</script>


